<template>
  <div class="c-range-box">
    <slot name="label"></slot>
    <div class="line" :style="'height:' + lineHeight + ';background:' + lineBackground" @touchend="select"></div>
    <div class="circle" :style="'width:' + circleR + ';height:' + circleR + ';left:' + left + 'px;-webkit-transition:left ease ' +(transition?'0.2':'0')+ 's'"></div>
    <div class="no-control-mask" v-show="!canControl"></div>
  </div>
</template>

<script>
  module.exports = {

    /**
     * 暴露的方法：内容改变
     * @param  {[type]} 'changed'  方法名
     * @param  {[type]} this.value 值
     * @param  {[type]} precent    百分比
     */
     // this.$dispatch('changed', this.value, precent)

    props: {
      // 当前是否处于可控状态
      canControl: {
        type: Boolean,
        default: true
      },
      // 最小值
      'min': {
        type: Number,
        default: 0
      },
      // 最大值
      'max': {
        type: Number,
        default: 100
      },
      // 默认值
      'value': {
        type: Number,
        default: 75
      },
      // 高度
      'lineHeight': {
        type: String,
        default: '0.4rem'
      },
      // 背景色数组
      'lineBackgroundColors': {
        type: Array,
        default () {
          return ['#fbd154', '#fff3c0', '#fff', '#ddebff', '#000']
        }
      },
      // 是否实时上报数据value 设置为false的时候 当变化完成才上报value 设置为true的时候 回调changed会被频繁调用
      'realTime': {
        type: Boolean,
        default: false
      }
    },

    data () {
      return {
        left: 0,
        // lineHeight: '0.2rem',
        circleR: '0.6rem',
        transition: false
      }
    },
    computed: {
      lineBackground () {
        var resultLeft = '-webkit-linear-gradient(left'
        var resultRight = ')'
        var resultRightCenter = ''
        var length = this.lineBackgroundColors.length
        for (let i = 0; i < length; i++) {
          resultRightCenter += ', ' + this.lineBackgroundColors[i] + ' ' + parseInt(100 / (length - 1) * i) + '%'
        }
        var result = resultLeft + resultRightCenter + resultRight
        return result
      }
    },
    watch: {
      value () {
        if (this.realTime) {
          this.dispatch()
        } else {
          clearTimeout(this.tid)
          this.tid = setTimeout(() => {
            this.dispatch()
          }, 200)
        }
      }
    },
    ready () {
      this.init()
    },
    methods: {
      /**
       * 点击事件
       * @param  {[type]} ev [description]
       * @return {[type]}    [description]
       */
      select (ev) {
        var self = this
        var line = ev.target
        var _circle = line.nextElementSibling
        var _circleR = _circle.offsetWidth / 2
        var maxLeft = line.clientWidth - _circleR * 2
        var left = ev.changedTouches[0].clientX - self.getPosition(line).left - _circleR
        if (left < 0) {
          left = 0
        } else if (left > maxLeft) {
          left = maxLeft
        }
        this.transition = true
        setTimeout(() => {
          this.transition = false
        }, 0)
        // console.log(_circle.style.WebkitTransition)
        self.left = left
        self.computedValue(maxLeft)
      },
      /**
       * 组件初始化
       * @return {[type]} [description]
       */
      init () {
        var self = this
        var parentDom = this.$el
        var dom = parentDom.children[1]
        var parentWidth = parentDom.clientWidth
        var maxLeft = parentWidth - dom.clientWidth

        self.left = maxLeft * ((self.value - self.min) / (self.max - self.min))
        var dx
        touch.on(dom, 'touchstart', function (ev) {
          dx = self.left
          ev.preventDefault()
        })
        touch.on(dom, 'drag', function (ev) {
          var offx = dx + ev.x
          if (offx <= maxLeft && offx >= 0) {
            self.left = offx
          } else if (offx >= maxLeft) {
            self.left = maxLeft
          } else if (offx <= 0) {
            self.left = 0
          }
          self.computedValue(maxLeft)
        })
        touch.on(dom, 'dragend', function (ev) {
          dx += ev.x
        })
      },
      /**
       * 计算当前dom在页面中相对屏幕的位置
       * @param  {[type]} node [description]
       * @return {[type]}      [description]
       */
      getPosition (node) {
        var left = node.offsetLeft
        var top = node.offsetTop
        var parent = node.offsetParent
        while (parent) {
          left += parent.offsetLeft
          top += parent.offsetTop
          parent = parent.offsetParent
        }
        return {left: left, top: top}
      },
      /**
       * 重新计算当前的value值 并且dispatch出去
       * @param  {[type]} maxLeft [description]
       * @return {[type]}         [description]
       */
      computedValue (maxLeft) {
        this.value = this.min + this.left / maxLeft * (this.max - this.min)
      },
      /**
       * 暴露事件changed出去
       * @return {[type]} [description]
       */
      dispatch () {
        var precent = (this.value - this.min) / (this.max - this.min)
        this.$dispatch('changed', this.value, precent)
      }
    }
  }

</script>
<style lang="stylus">

  .c-range-box
    width 100%
    height 100%
    position relative
    .line
      height 0.5rem
      width 100%
      background red
      border-radius 10rem
      position absolute
      top 50%
      transform translate3d(0,-50%,0)
      border 1px solid #cdcdcd
    .circle
      background #fff
      border 1px solid #cbcbcb
      position absolute
      top 50%
      border-radius 50%
      transform translate3d(0,-50%,0)
    .no-control-mask
      width 100%
      height 100%
      position absolute
      left 0
      top 0
</style>
